<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <h1>一级标题</h1>

    <p>有时治愈，常常帮助，总是安慰，</p>
    <p>vue框架</p>


    <!--
        标签
        标题标签：<h1-h6></h1-h6>   独占一行
        换行标签：<br/>
        段落标签：<p>
        容器标签，没有语义
        div     一行
        span    一行多个

        文本格式化标签
        加粗：strong/b
        倾斜：em/i
        删除线：del/s
        下划线：ins/u

        图像标签和路径
        <img src="图像URL"/>   单标签
        <alt/>  替换文本，图像不能显示的文字
        <title/>  鼠标放到图片上显示文字
    -->

    <p>
        <em>有时治愈，</em>
        <strong>常常帮助，</strong>
        <del>总是安慰，</del>
        <ins>这大概就是人生常态</ins>
    </p>
    <div>123456789</div>
    <span>1   2    3   4   5   6   7   8   9</span>

    <br/> //alt替换文本 title提示文本
    <img src="adele.jpg" alt="我是吴彦祖" title="吴彦祖" width="300" height="=1000" border="10" />

    <!--
    //相对路径    反斜杠/////
    同一级路径<img src="photo.jpg"/>
    下一级<img src="文件夹名/photo.jpg"/>
    上一级<img src="../photo.jpg"/>

    绝对路径：指目录下的绝对位置，直接到达目标位置，通常从盘符开始的路径。不常用   斜杠\\\\\
    -->


    超链接标签
    <h4>外部链接</h4>
    <a href="http://www.qq.com">腾讯</a>

    <a href="https://wx.qq.com/"><img src="adele.jpg"></a>

    <h4>内链接</h4>
    <a href="hello.html" target="_blank">hello</a>

    <h4>空链接</h4>
    <a href="#">公司地址</a>

    <h4>下载地址</h4>
    <a href="文件名">下载文件</a>

    <h4>网页元素:如文本、图像、表格、音频、视频等都可以添加超链接</h4>
    <a href="">网页元素</a>

    <h4>瞄点链接</h4>
    <p>点击链接，可以快速定位到页面中的某个位置 在链接文本的href属性中，设置属性值为#名字 形式，如<a href="#two">第二级</a>， 找到目标位置标签，里面添加一个id属性=刚才的名字，如：
        <h3 id="two">第二级介绍</h3>
    </p>

    <h4>
        特殊字符 注释：
        <!--注释内容-->
        空格：&nbsp; 小于：&lt; 大于：&gt; 和号：&amp; 人民币：&yen; 版权：&copy; 注册商标：&reg; 摄氏度：&deg; 正负号：&plusmn;; 乘号：&times; 除号：&divide;平方2（上标2）：&sup2;
    </h4>



    <!-- 
    target 打开窗口的方式 target="_self" 当前窗口打开页面 这种方式是默认的打开方式
    target="_blank" 新起一页 
    -->


    <h1>表格标签</h1>

    <!--
        作用：用于展示、显示数据 

        语法：
        <table>                         用于定义表格的标签
            <tr>                        标签用于表格中的行，必须嵌套在<table></table>标签中
                <td>                    用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，字母td指表格数据(table data),即单元格的内容
                    单元格内的文字
                </td>   <th>表头单元格<th>
            </tr>
        </table>

        属性：
        align         left、center\right     对齐方式
        border        1或 ""                 边框，默认为 "",没有边框
        cellpadding   像素值                 单元边缘与其内容之间的空白，默认1像素
        cellspacing   像素值                 单元格之间的空白，默认2像素。
        width         像素值或百分百         规定表格的宽度

        <thead></thead>:用于定义表格的头部。<thead>内部必须拥有<tr>标签。一般是位于第一行。
        <tbody></tbody>:用于定义表格的主体，主要用于存放数据本体。
        以上两个标签都是放在<table></table>标签中

    -->

    <table align="right" border="1" cellpadding="10" cellspacing="5" width="60">
        <tr>
            <th>性别</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </table>


    <!---合并单元格
    colspan  跨列合并
    rowspan  跨行合并
    --->
    <br>

    <table align="right" border="1" cellpadding="10" cellspacing="5" width="60">
        <tr>
            <th></th>
            <th colspan="2"></th>
        </tr>
        <tr>
            <th rowspan="2"></th>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <th></th>
            <th></th>
        </tr>
    </table>


    <!--
        列表标签
        1无序列表（重要）
        <ul>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
            .....
        </ul>

        无序列表的各个列表项之间没有顺序级别之分,是并列的。
        <ul></ul>中只能嵌套<li></li> ，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
        <li>与</li>之间相当于一个容器,可以容纳所有元素。
        无序列表会带有自己的样式属性,但在实际使用时,我们会使用CSS来设置。

        2有序列表
        <ol>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
        </ol>

        <ol></0l>中只能嵌套<li></li> ，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
        <li>与</li>之间相当于一个容器,可以容纳所有元素。
        无序列表会带有自己的样式属性,但在实际使用时,我们会使用CSS来设置。

        3自定义列表
        自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。
        <dl>
            <dt>关注我们</dt>
            <dd>微博</dd>
            <dd>微信</dd>
            <dd>联系我们</dd>

        </dl>

        <dl></dl>里面只能包含<dt>和<dd>。
        <dt>和<dd>个数没有限制,经常是一个<dt> 对应多个<dd>.     
    -->

    <h4>无序列表</h4>
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        .....
    </ul>

    <h4>有序列表</h4>
    <ol>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ol>

    <h4>自定义列表</h4>
    <dl>
        <dt>关注我们</dt>
        <dd>微博</dd>
        <dd>微信</dd>
        <dd>联系我们</dd>
    </dl>


    <!--
        表单标签
        目的：收集用户信息
        组成：表单域、表单控件、提示信息

        1表单域
        在HTML标签中，<form>标签用于定义表单域,以实现用户信息的收集和传递。
        <form>会把它范围内的表单元素信息提交给服务器。
        <form action="url地址" method="提交方式" name="表单域名称">
            各种表单元素控件
        </form>
        常用属性：
        属性     属性值      作用
        action   url地址     用于指定接收并处理表单数据的服务器程序的url地址
        method   get/post    用于设置表单数据的提交方式，其取值为get或post
        name     名称        用于指定表单的名称，以区分同一个页面中的多个表单域

        2表单控件(表单元素)
        在表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或者选择的内容控件。
        input输入表单元素
        select下拉表单元素
        textarea文本域元素

        <input>表单元素
        在英文单词中, input是输入的意思,而在表单元素中<input>标签用于收集用户信息。在<input>标签中,
        包含一个type属性,根据不同的type属性值,输入字段拥有很多种形式(可以是文本，字段、复选框、掩码后的文本控件、单选按钮、按钮等)。
        <input type="属性值" />
        <input/>       标签为单标签
        type 属性设置不同的属性值用来指定不同的控件类型
        type属性的属性值及其描述如下：

        属性值          描述
        button         定义可点击按钮(多数情况下，用于通过JavaScript启动脚本)。
        checkbox       定义复选框。
        file           定义输入字段和“浏览"按钮，供文件上传。
        hidden         定义隐藏的输入字段。
        image          定义图像形式的提交按钮。
        password       定义密码字段。该字段中的字符被掩码。
        radio          定义单选按钮。
        reset          定义重置按钮。重置按钮会清除表单中的所有数据。
        submit         定义提交按钮。提交按钮会把表单数据发送到服务器。
        text           定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符。

        除type属性外，<input>标签还有其他很多属性,其常用属性如下:
        属性      属性值           描述
        name      由用户自定义     定义input元素的名称。
        value     由用户自定义     规定input元素的值。
        checked   checked         规定此input元素首次加载时应当被选中。
        maxlength 正整数          规定输入字段中的字符的最大长度。

        name和value是每个表单元素都有的属性值主要给后台人员使用.
        name表单元素的名字,要求单选按钮和复选框要有相同的name值
        checked属性主要针对于单选按钮和复选框主要作用一打开页面,就要可以默认选中某个表单元素.
        maxlength是用户可以在表单元素输入的最大字符数,一般较少使用.
    -->

    <h1>表单标签 服务器编程</h1>
    <form action="demo.php" method="POST" name="name1">
        <!--text 文本框-->
        用户名:<input type="text" name="username"> <br>
        <!--"password 密码框-->
        密码: <input type="password" name="pwd"> <br>
        <!--radio 单选按钮-->
        性别: 男 <input type="radio" name="sex"> 女 <input type="radio" name="sex"> <br>
        <!--checkbox 复选框-->
        爱好: rap <input type="checkbox" name="hobby"> 篮球 <input type="checkbox" name="hobby"> 跳 <input type="checkbox" name="hobby"> <br>
        <!--sumbit 提交按钮-->
        <input type="submit" value="免费注册"> <br>
        <!--reset 重置按钮-->
        <input type="reset" value="重新填写"> <br>
        <!--button 普通按钮 结合js搭配使用-->
        <input type="button" value="发送验证码"> <br>
        <!--file 文件域 上传文件用-->
        <input type="file" value="上传头像"> <br>


    </form>

    <!--label 标签-->
    <label for="text"> 用户名：</label> <input type="text" id="text">
    <input type="radio" id="nan"> <label for="nan">男</label>
    <input type="radio" id="nv"> <label for="nv">女</label>

    <!--表单标签
        表单控件
        1.input 输入表单元素
        2.select 下拉表单元素
        3.textarea 文本域元素
    -->

    <!--select默认 选项-->

    <!--文本域
        语法：
        <textarea rows="3" cols="20">
            文本内容
        </textarea>   

        参数：cols=每行的字符数，rows=显示的行数
    -->
    <p></p>

    <form>
        籍贯：
        <select>
        <option>水星</option>
        <option>金星</option>
        <option selected="selected">地球</option>
        <option>火星</option>
        <option>木星</option>
        
        
    </select>
    </form>

    <br/> 个人介绍：
    <textarea>俺来自地球</textarea>
    <br> 播放视频
    <embed src="E:\webgis开发\MP4_.mp4" />

    <br> 播放音频
    <audio src="E:\webgis开发\myth.mp3" controls="controls">
        Your browser does not support the audio element.
    </audio>


</body>

</html>

<!--
    open in browser
    js-css-html formatter
    auto rename tag
    css peek
-->